import React,{useRef} from 'react'
/*
    1、类组件中获取DOM的步骤
    1) 导入createRef
    2) 调用this.xx=createRef()
    3) 在标签中使用ref={this.xx}
    4) 获取DOM this.xx.current
    2、useRef Hook的使用步骤
    1）导入useRef
    2) 执行useRef函数，将其赋值给一个变量
    3) 在标签中使用ref属性将其引用这个变量
    4) 使用DOM：xx.current
*/
export default function UseRefDemo() {
  const box=useRef()
  return (
    <div>
        <div style={{width:'100px',height:'100px',backgroundColor:'red'}} 
             ref={box} 
             onMouseOver={()=>{
                box.current.style.backgroundColor="orange"
             }}
             onMouseOut={()=>{
                box.current.style.backgroundColor="yellow"
             }}></div>
    </div>
  )
}
